<template>
  <!-- <div class="login" :style="'background-image: url('+this.baseImgUrls+'./static/images/login_pic.png) top center no-repeat;'"> -->
  <div class="login">
    <router-view />
    <div class="windBox">
      <div class="loginBox">
        <div v-if="loginType == 1">
          <div class="fr" @click="changeLoginType(2)">
            <span
              class="iconfont iconerweima bottonBule finger iconSize"
            ></span>
          </div>
          <div class="fr titleS">
            <span class="titleMess">扫码登录</span>
          </div>
        </div>
        <div v-if="loginType == 2">
          <div class="fr" @click="changeLoginType(1)">
            <span class="iconfont iconpc bottonBule finger iconSize"></span>
          </div>
          <div class="fr title">
            <span class="titleMess">登录</span>
          </div>
        </div>
        <div class="logo">
          <p>请登录，</p>
          <p>档案管理中心</p>
        </div>
        <div class="loginText">
          <!-- <p>用户名</p> -->
          <div id="formDiv" v-if="loginType == 1">
            <el-form ref="form" :model="form">
              <el-form-item label="">
                <el-input
                  v-model="form.phone"
                  placeholder="手机号"
                  style="position: relative;padding-left:36px"
                ></el-input>
                <div class="userIcon iconfont iconyonghu"></div>
              </el-form-item>
              <!--              <el-form-item label="">-->
              <!--                <el-input type="password"-->
              <!--                          style="position: relative;padding-left:36px"-->
              <!--                          v-model="form.password"-->
              <!--                          placeholder="用户密码"-->
              <!--                          @keyup.enter.native="onSubmit"></el-input>-->
              <!--                <div class="userIcon iconfont iconmima"></div>-->
              <!--              </el-form-item>-->
              <el-form-item class="">
                <!--                <router-link to="/admin/shopDataGraph">进入后台管理首页</router-link>-->
                <el-button type="primary" id="check-btn" @click="onSubmit"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div v-if="loginType == 2">
            <div id="qrDiv">
              <div class="QRcode">
                <div class="qrcode" ref="qrCodeUrl"></div>
              </div>
            </div>
            <div class="footer">
              <div class="Scan">
                <span class="iconfont iconsaoyisao"></span>
              </div>
              <div class="line">
                <div></div>
              </div>
              <div class="footerLeft">
                <span>打开钉钉</span><span>扫一扫登录</span>
              </div>
            </div>
            <div class="refresh">
              <span class="finger fontSize10 clickActive" @click="creatQrCode"
                >刷新
                <span class="freshSize iconfont iconrefresh mainLeft10"></span
              ></span>
    <span
                class="fontSize10 mainLeft40 finger clickActive"
                @click="changeLoginType(1)"
                >账号密码登录</span
              >  
            </div>
          </div>
          <div v-if="loginType == 1">
            <div class="changeTow">
              <span
                class="fontSize10 finger clickActive"
                @click="changeLoginType(2)"
                >二维码登录</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<img :src="@/static/images/login_pic.png" class="backimg" alt="">-->
    <img src="/static/images/login_pic.png" class="backimg" alt="" />
  </div>
</template>

<script>
import Const from "@/api/Const.js";
import "@/assets/css/commont.css";
import "@/assets/css/overall.css";
import "@/assets/css/verify.css";
import "@/assets/js/verify.js";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      loginType: 2,
      // isLogin: 'http://localhost:80/uhome-bigdata/auth/rest/scan/getUserPhone', //测试环境走naginx
      isLogin: "http://bi.uh24.com.cn:8080/auth/rest/scan/getUserPhone", //本地
      baseUrl:
        "http://bi.uh24.com.cn/ddToken/index.html?name=证照管理系统&code=",
      form: {
        username: "",
        password: "",
        code: "",
        phone: ""
      },
      errorFlag: true,
      codeValidate: false, //验证码是否通过
      _inter: 1,
      guid: "",
      qrcode: ""
    };
  },
  computed: {},
  created() {
    this.guid = this.guida("uhome");
    this.interval();
  },
  mounted() {
    this.creatQrCode();
  },
  methods: {
    changeLoginType(type) {
      var self = this;
      this.loginType = type;
      if (type == 2) {
        setTimeout(() => {
          this.qrcode = "";
          // this.qrcode.makeCode(self.baseUrl+self.guid);
          self.creatQrCode();
        }, 500);
      }
    },
    guida(prefix) {
      var counter = 0;
      return (function(prefix) {
        var guid = (+new Date()).toString(32),
          i = 0;
        for (; i < 5; i++) {
          guid += Math.floor(Math.random() * 65535).toString(32);
        }
        return (prefix || "byy_") + guid + (counter++).toString(32);
      })(prefix);
    },
    //定时器查看扫码状态
    interval() {
      var self = this;
      this._inter = setInterval(() => {
        console.log("执行定时器");
        self.isLogined();
      }, 5000);
    },
    isLogined() {
      var self = this;
      console.log(self, "self.$http");
      self.$axios
        .get(Const.api.bigdataGetPhone, {
          params: {
            id: self.guid
          }
        })
        .then(Response => {
          var res = Response.data;
          if (res.data.code == 0) {
            if (res.data.data != "0" && res.data.data != "-2") {
              var phone = res.data.data;
              //获取到用户的手机号，说明是公司的员工
              //调用登录接口

              this.$axios
                .get(Const.api.login, {
                  params: {
                    phone: phone
                  }
                })
                .then(res => {
                  console.log(res);
                  if (res.data.code == 0) {
                    var data = res.data.data;
                    // self.imgPrms =data.user.img
                    // localStorage.setItem("img", img)
                     localStorage.setItem("img", data.user.img);
                    localStorage.setItem("token", data.token);
                    localStorage.setItem("userMenus", JSON.stringify(data.userMenus));
                    localStorage.setItem("userInfo", JSON.stringify(data.user));
                    localStorage.setItem("userName", data.userName);
                    localStorage.setItem("city", data.city);
                          this.$axios.get(Const.api.saveLoginLog);
                    var menus = localStorage.getItem("userMenus")
                    var menusList = JSON.parse(menus);
                    this.$router.push({ path: menusList[0].path });
                  } else {
                    self.$message(res.msg);
                    self.creatQrCode();
                    // this.$router.push({name: 'login'})
                  }
                });
            }
          } else {
            self.$message(res.msg);
            self.creatQrCode();
          }
        });
    },
    creatQrCode() {
      var self = this;
      if (this.qrcode != "") {
        this.guid = this.guida("uhome");
        this.qrcode.clear();
        this.qrcode.makeCode(self.baseUrl + self.guid);
      } else {
        console.log("this.$refs.qrCodeUrl:" + this.$refs.qrCodeUrl);
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: self.baseUrl + self.guid,
          width: 160,
          height: 160,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      }
    },
    codeGenerater() {
      var self = this;
      $("#codeDiv").codeVerify({
        type: 1,
        figure: 100, //位数，仅在type=2时生效
        arith: 0, //算法，支持加减乘，不填为随机，仅在type=2时生效
        width: "200px",
        height: "50px",
        fontSize: "30px",
        codeLength: 4,
        btnId: "check-btn",
        ready: function() {},
        success: function() {
          self.codeGenerater = true;
          self.onSubmit();
        },
        error: function() {
          self.codeGenerater = false;
          if (self.form.username == "" || self.form.password == "") {
            self.$message({
              message: "请输入用户名密码",
              type: "warning"
            });
            return;
          }
          self.$message({
            message: "验证码错误",
            type: "warning"
          });
          return;
        }
      });
    },
    onSubmit() {
      var self = this;
      if (!self.form.phone) {
        self.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return;
      }

      this.$axios
        .get(Const.api.login, {
          params: {
            phone: self.form.phone
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            var data = res.data.data;
        
            // self.imgPrms =data.user.img
             localStorage.setItem("img", data.user.img);
            localStorage.setItem("token", data.token);
            localStorage.setItem("userMenus", JSON.stringify(data.userMenus));
            localStorage.setItem("userInfo", JSON.stringify(data.user));
            localStorage.setItem("userName", data.userName);
            localStorage.setItem("city", data.city);
            var menus = localStorage.getItem("userMenus")
            var menusList = JSON.parse(menus);
            

            this.$axios.get(Const.api.saveLoginLog);

            this.$router.push({ path: menusList[0].path });
          } else {
            self.$message.error({
              message: res.msg
            });
          }
        });

      console.log("submit!");
    }
  },
  beforeDestroy() {
    clearInterval(this._inter);
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.backimg {
  width: 100%;
  height: 100%;
  top: 0;
}

.loginBox {
  width: 500px;
  height: 480px;
  background: rgba(219, 251, 255, 1);
  opacity: 0.9;
  border-radius: 5px;
  padding: 10px;
}

.windBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.titleS,
.title {
  /* margin-top: 5px; */
  margin-right: 5px;
  width: 100px;
  height: 20px;
  color: #df9c1f;
  font-size: 10px;
  background-size: 100px 20px;
  background-image: url(/static/images/title.png);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-right: 3px;
}

.logo {
  margin-top: 20px;
  margin-bottom: 20px;
}

.logo img {
  display: block;
  width: 150px;
  color: #333;
  margin: 10px auto;
}

.logo p {
  padding-top: 10px;
  font-size: 22px;
  font-weight: bold;
  margin-left: 20px;
}

.loginText {
  width: 320px;
  margin: 20px auto;
}

.errorStyle {
  color: red;
  font-size: 14px;
}

.iconSize {
  font-size: 38px;
}

#qrDiv {
  /* width: 500px; */
  margin-top: 45px;
}

.QRcode {
  width: 200px;
  height: 200px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

#formDiv {
  margin-top: 45px;
}

#check-btn {
  width: 320px !important;
}

.footer {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.Scan {
  color: #409eff;
}

.Scan span {
  font-size: 34px;
}

.footer .line {
  width: 1px;
  height: 30px;
  /* background-color: #999; */
  margin: 0 10px 0 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footer .line div {
  width: 1px;
  height: 26px;
  background-color: #999;
}

.footerLeft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
}

.refresh {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.fontSize10 {
  font-size: 10px;
}

.changeTow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.userIcon {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #d1d9da;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.freshSize {
  font-size: 10px;
}
</style>
